<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="queryParams.projectCode" filterable class="zs-select-md zs-space-right-sm"
                    placeholder="项目名称">
                    <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
                        :value="item.biProjectCode" />
                </el-select>
                <el-select v-model="queryParams.status" filterable clearable class="zs-select-md zs-space-right-sm"
                    placeholder="生效状态">
                    <el-option v-for="item in statusList" :key="item" :label="item" :value="item" />
                </el-select>
                <el-select v-model="queryParams.causeType" filterable clearable class="zs-select-md zs-space-right-sm"
                    placeholder="原因类型">
                    <el-option v-for="item in causeTypeList" :key="item.causeType" :label="item.causeType" :value="item.causeType" />
                </el-select>
                <el-button class="zs-btn-plain" @click="queryList()">查询</el-button>
            </span>
            <span class="zs-layout-flex-row">
                <el-button class="zs-btn-plain" @click="handleDownload"><el-icon class="el-icon--left">
                        <Upload />
                    </el-icon>导出</el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data"
                :cloumns="tableData.cloumns" @pageChange="pageChange">
                <!-- <template #column>
                    <el-table-column label="操作" width="100" align="center">
                        <template #default="{ row }">
                            <el-button class="zs-link" link size="small" @click="handleJumpMapPage(row)">查看</el-button>
                        </template>
                    </el-table-column>
                </template> -->
            </hsPageTable>
        </div>
    </div>
    <ApprovalProcessDrawer v-if="isShowTableDrawer" :isShow="isShowTableDrawer" :selectItem="curRow"
        :projectCode="queryParams.projectCode" @close="closeDrawer">
    </ApprovalProcessDrawer>
</template>
  
<script setup>
import ApprovalProcessDrawer from './component/approvalProcessDrawer';
import dbPublicApi from '@/api/dbPublic'
import { carParkDetailApi, carParkCauseTypeDropDownApi, carParkExportApi } from '@/api/Manage/Business/detailPages'
import { ref, reactive } from 'vue'
import { downloadNewFile } from "@/utils/publicUtils"
import { useRoute } from 'vue-router'
import { useStore } from "vuex";
let store = useStore();
const route = useRoute()
const curPageSize = ref(store.state.uiPageSizeDefault);
const { biProjectCode, dataTime, resourceKey } = route.query

let projectList = ref([]) // 项目列表
let statusList = ref(['生效', '失效'])
let causeTypeList = ref([])
const curRow = ref({})

let queryParams = reactive({
    pageNum: 1,
    pageSize: curPageSize.value,
    projectCode: biProjectCode,//项目Code	
    status: '',
    causeType: ''
})

let tableData = reactive({
    loading: false,
    total: 0,
    data: [],
    cloumns: [
        { prop: "vipName", label: "姓名", width: '120', align: "left" },
        { prop: "vipCompany", label: "所属单位", width: '120', align: "left" },
        { prop: "vipStartDate", label: "生效日期", width: '120', align: "center" },
        { prop: "vipEndDate", label: "失效日期", width: '120', align: "center" },
        { prop: "effectiveDays", label: "生效时长", width: '100', align: "center" },
        { prop: "status", label: "生效状态", width: '100', align: "center" },
        { prop: "causeTypeName", label: "原因类型", width: '100', align: "center" },
        // { prop: "reasonExplain", label: "原因说明", align: "left", isNotooltip: true },
        { prop: "reasonExplain", label: "原因说明", align: "left" },
        { prop: "userName", label: "录入人", width: '100', align: "center" },
        {
            prop: 'oaApplyInfoList', label: '申报依据', align: 'center', type: 'html', width: '80', render: ({ row }) => {
                return row.oaApplyInfoList ? <el-image class="zs-table-image-min" src={row.oaApplyInfoList ? row.oaApplyInfoList[0] : ''} preview-src-list={row.oaApplyInfoList}
                    preview-teleported="true" ></el-image > : <div>-</div>
            }
        },
        {
            prop: 'fid', label: '审批流程', align: 'center', type: 'html', width: '80', render: ({ row }) => {
                return row.fid ? <el-button class="zs-link" link size="small" onClick={() => openApproval(row)}>查看</el-button> : '-'
            }
        },
        { prop: "carNumber", label: "车牌号", width: '100', align: "center" },
        { prop: "parkingName", label: "适用车场", width: '150', align: "left" },
        { prop: "vipManagementNo", label: "VIP编号", width: '100', align: "center" },
    ]
})

// 分页变化
function pageChange(page) {
    queryParams.pageNum = page.current
    queryParams.pageSize = page.pageSize
    queryList()
}
function queryList() {
    tableData.loading = true
    carParkDetailApi({ ...queryParams, dataTime }).then(res => {
        let resData = res.data
        if (resData.errorCode == 200) {
            tableData.data = resData.data
            tableData.total = resData.totalCount
        }
        tableData.loading = false
    })
}
queryList()


const getPorjectList = async () => {
    // 获取项目列表
    await dbPublicApi.queryProjectPcApi({ dataTime, resourceKey }).then((res) => {
        if (res.data.code == 200) {
            projectList.value = res.data.data
        }
    })
    // 获取原因类型列表
    await carParkCauseTypeDropDownApi().then((res) => {
        if (res.data.errorCode == 200) {
            causeTypeList.value = res.data.data
        }
    })
}
getPorjectList()

// 导出
async function handleDownload() {
    const fileName = `车场白名单.xls`;
    let fileData = await carParkExportApi({ ...queryParams, dataTime });
    downloadNewFile(fileData.data, fileName);
}

const isShowTableDrawer = ref(false)
const closeDrawer = (data) => {
    isShowTableDrawer.value = data.isShow
}
const openApproval = (row) => {
    isShowTableDrawer.value = true
    curRow.value = row
}

</script>
  
<style lang="scss" scoped></style>
  